<template :style="{height:$windowHeight()+'rpx',width:$windowWidth()+'rpx'}">
	<view class="content u-skeleton">

		<!-- 我的信息栏 -->
		<my-info :data="{headSrc:headSrc,loading:loading,musicList:musicList,nowPlayer:nowPlayer}" @openList="music"
			@changeIndex="changeIndex" @gogogo="gogogo"></my-info>

		<!-- 中部 -->
		<center-content :data="{reloadCard:reloadCard,loading:loading,cards:cards,headSrc:headSrc}" @openCard="openCard" @reloadCardFun="reloadCardFun"></center-content>

		<!-- 右侧栏 -->
		<right-content></right-content>
		
		<!-- 以下为小部件 -->
		<!-- 弹出大卡片 -->
		<u-popup v-model="showBigCard" height="1600" width="2680" mode="center" :closeable="true" close-icon-size="60">
			<BigCard :card="bigCard"></BigCard>
		</u-popup>

		<!-- 弹出左侧播放列表-->
		<u-popup v-model="showMusic" width="720" mode="left" :closeable="true" close-icon-size="40" :duration="200"
			close-icon-pos="top-right">
			<music-list @changePlayer="changePlayer" :musicList="musicList" :nowPlayer="nowPlayer"></music-list>
		</u-popup>

		<u-popup v-model="showLoading" height="800" width="1600" mode="center" :duration="200" :closeable="false" :mask-close-able="false">
			<view class="loading">
				<u-circle-progress :percent="loadingType*25" width="400" active-color="#2979ff" border-width="24"
					duration="0">
					<text v-if="!error" style="font-size: 36rpx;color: #686868;">{{loadingText[loadingType-1]}}</text>
					<text v-if="error" style="font-size: 36rpx;color: #DD524D;">发生错误！</text>
				</u-circle-progress>
			</view>
		</u-popup>
	
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headSrc: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a3f905ee-2869-45eb-968d-c49f9a9d1467/11de335b-0114-4367-9ab3-1a6ba082db48.jpeg",
				cards: [],
				loading: true,
				showBigCard: false,
				showMusic: false,
				showLoading: true,
				musicList: [],
				nowPlayer: 0,
				bigCard: {},
				nowWeb: "",
				loadingType: 0,
				loadingText: ["初始化...", "载入动态...", "载入歌曲...", "完成！"],
				error: false,
				reloadCard: false
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "岛菌博客"
			})
			//console.log("w"+this.windowWidth,"h"+this.windowHeight);
			this.loadingType = 2
			this.reloadCard = true
			this.callFun("getAllCard", {}, (res) => {
				this.cards = this.sortByTime(res.result.data)
				this.loadingCard = false
				this.loadingType = 3
				this.callFun("getAllMusic", {}, (res) => {
					this.musicList = res.result.data.sort((a1, a2) => {
						return a1.type - a2.type
					})
					this.loadingType = 4
					setTimeout(() => {
						this.showLoading = false
						this.loading = false
						this.reloadCard = false
					}, 400)
				}, (err) => {
					this.error = true
					uni.showToast({
						title: "网络好像出错了~",
						icon: "none"
					})
				})
			}, (err) => {
				this.error = true
				uni.showToast({
					title: "网络好像出错了~",
					icon: "none"
				})
			})
		},
		methods: {
			reloadCardFun() {
				this.reloadCard = true
				this.callFun("getAllCard", {}, (res) => {
					this.cards = this.sortByTime(res.result.data)
					this.reloadCard = false
				}, (err) => {
					uni.showToast({
						title: "网络好像出错了~",
						icon: "none"
					})
				})
			},
			changeIndex(data) {
				this.nowPlayer = data
			},
			changePlayer(index) {
				this.nowPlayer = index
			},
			sortByTime(cards) {
				//console.log(cards);
				cards.sort(function(a1, a2) {
					var time1 = a1.time
					var time2 = a2.time
					time1 = time1.replace(/[^0-9]/ig, "");
					time2 = time2.replace(/[^0-9]/ig, "");
					time1 = parseInt(time1)
					time2 = parseInt(time2)
					if (time1 > time2) {
						return -1
					} else if (time1 < time2) {
						return 1
					} else {
						return 0
					}
				})
				return cards
			},
			music() {
				this.showMusic = true
			},

			toPage(url) {
				window.open(url)
			},
			openCard(data) {
				this.bigCard = this.cards[data]
				this.showBigCard = true
			},
			gogogo(url) {
				this.toPage(url)
			}
		}
	}
</script>

<style lang="scss">
	page,
	html {
		background-color: $u-bg-color;
		//width: 3840rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #fff;
		//background-image: url(../../static/bg.png);
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		flex-direction: row;

		.loading {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
</style>
